<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page import="com.mozz.finally_work.pojo.User" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%--// 获取Session中的数据--%>
<c:set var="user" scope="session" value="${sessionScope.get('user')}"/>
<%--requet数据--%>
<c:set var="blogs" scope="request" value="${requestScope.blogs}"/>
<%--当前页数>--%>
<c:set var="page" scope="request" value="${requestScope.page}"/>
<%--最大页数--%>
<c:set var="max" scope="request" value="${requestScope.max}"/>

<!DOCTYPE html>
<html>

<head>
    <title>Code Blog</title>
    <link rel="stylesheet" href="public/css/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="public/css/blog.css">
    <link rel="stylesheet" href="public/css/iconfont.css">
    <link rel="stylesheet" href="public/css/markdown.css">
    <link rel="stylesheet" href="public/css/layout/header.css">

</head>

<body>
<%--顶部tag栏--%>
<div class="tar-bar">
    <div class="left-box">
        <div class="menu-item">
            <a href="codeBlog"><span class="iconfont icon-home"></span>首页</a>
        </div>
        <div class="menu-item">
            <a href="timeline.jsp?userId=${user.id}"><span class="iconfont icon-time-line"></span>时间轴</a>
        </div>
        <div class="menu-item">
            <a href="TagsServlet"><span class="iconfont icon-tag"></span>标签</a>
        </div>
        <div class="menu-item">
            <span class="iconfont icon-about"></span> 关于
        </div>
    </div>
    <div class="right-box">
        <div class="menu-item">
            <a href="CategoryServlet?userId=${user.id}"><span class="iconfont icon-folder-open"></span>分类</a>
        </div>
        <c:if test="${user!=null}">
            <div class="menu-item">
                <!-- <span><a href="UserHomeServlet?userId=${user.id}"><c:out value="${user.nickName}"/></a></span>
                <div class="avatar-box">
                    <img class="avatar" src="uploads/avatar/${user.avatar}" alt="">
                </div> -->
                <a href="UserHomeServlet?userId=${user.id}"><span class="iconfont icon-user"></span>个人中心</a>
            </div>
        </c:if>
        <c:if test="${user==null}">
            <div class="menu-item">
                <a href="login.jsp">
                    <button class="btn btn-success">登录</button>
                </a>
            </div>
        </c:if>
        <div class="menu-item public-btn">
            <a href="add_blog.jsp">
                <button class="btn">发表博客</button>
            </a>
        </div>
    </div>
</div>
<div class="banner">
    <div class="banner-bg"></div>
    <div class="type-box">
        <div id="typeWriter"></div>
        <span class="cursor"></span>
    </div>
</div>
<div class="container main-box">

    <div class="center-box">
        <c:if test="${blogs.size()==0}">暂无博客</c:if>
        <c:forEach var="item" items="${blogs}">
            <div class="item-box">
                <div class="item-title">
                    <a href="BlogDetailServlet?id=${item.id}"><c:out value="${item.title}"/></a>
                </div>
                <div class="item-content" id="markdown-box">
                        ${item.content}
                </div>
                <div class="icon-box">
                    <div class="item-user"><span class="iconfont icon-user"></span>
                        <c:out value="${item.user.nickName}"/>
                    </div>
                    <div class="item-public-time"><span class="iconfont icon-calendar"></span>
                        <fmt:formatDate pattern="yyyy/MM/dd" value="${item.publicTime}"/>
                    </div>
                    <c:if test="${item.tags.size()>0}">
                        <div class="item-tags"><span class="iconfont icon-tag"></span>
                            <c:forEach var="tag" items="${item.tags}">
                                <span><a href="TagsServlet?tagId=${tag.id}"><c:out value="${tag.name}"/></a></span>
                            </c:forEach>
                        </div>
                    </c:if>
                </div>
            </div>
        </c:forEach>
    </div>

    <c:if test="${user != null}">
        <div class="info-box">
            <div class="sticky-top">
                <div id="user-box">
                    <div class="avatar-box">
                        <img class="avatar" src="uploads/avatar/${user.avatar}" alt="">
                    </div>
                    <div class="username">
                            ${user.nickName}
                    </div>
                    <div class="email">
                            ${user.email}
                    </div>
                    <div class="status-box">
                        <div class="status-item">
                            <div class="status-item-name">动态</div>
                            <div class="status-count">${user.blogCount}</div>
                        </div>
                        <div class="status-item">
                            <div class="status-item-name">收藏</div>
                            <div class="status-count">${user.collectionCount}</div>
                        </div>
                        <div class="status-item">
                            <div class="status-item-name">关注</div>
                            <div class="status-count">${user.subscribeCount}</div>
                        </div>
                    </div>
                </div>
                <div class="category-box">
                    <div class="box-title">博客分类</div>
                    <c:if test="${user.categories.size()==0}">
                        <c:out value="暂无分类"/>
                    </c:if>
                    <c:if test="${user.categories.size()>0}">
                        <c:forEach var="category" items="${user.categories}">
                            <div class="category-item">
                                <div class="category-name"><a
                                        href="/blog/CategoryServlet?categoryId=${category.id}&userId=${user.id}">${category.categoryName}</a>
                                </div>
                                <div class="category-count">${category.count}</div>
                            </div>
                        </c:forEach>
                    </c:if>
                </div>
            </div>
        </div>
    </c:if>

</div>
<div class="container nav-box">
    <c:if test="${page!=null && max!=null}">
        <nav aria-label="...">
            <ul class="pagination">
                <c:if test="${page-1>0}">
                    <li class="page-item">
                        <a class="page-link" href="codeBlog?page=${page-1}">上一页</a>
                    </li>
                </c:if>

                <c:if test="${page-1<=0}">
                    <li class="page-item disabled">
                        <a class="page-link">上一页</a>
                    </li>
                </c:if>

                <c:if test="${page-1>0}">
                    <li class="page-item"><a class="page-link" href="codeBlog?page=${page-1}">${page-1}</a></li>
                </c:if>
                <li class="page-item active" aria-current="page">
                    <a class="page-link" href="codeBlog?page=${page}">${page}</a>
                </li>
                <c:if test="${page+1<max}">
                    <li class="page-item"><a class="page-link" href="codeBlog?page=${page+1}">${page+1}</a></li>
                </c:if>
                <c:if test="${page+1<max}">
                    <li class="page-item">
                        <a class="page-link" href="codeBlog?page=${page+1}">下一页</a>
                    </li>
                </c:if>
                <c:if test="${page+1>=max}">
                    <li class="page-item disabled" >
                        <a class="page-link">下一页</a>
                    </li>
                </c:if>
            </ul>
        </nav>
    </c:if>
</div>
</body>
<script src="public/js/jquery/jquery.js"></script>
<script src="public/js/typewriter.js"></script>

</html>
